<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>农产品订购{% block subtitle %}{% endblock %}</title>
    <link rel="shortcut icon" href="../static/img/base_images/favicon.ico" type="image/x-icon"/>
    <link type="text/css" rel="stylesheet" href="../static/css/base.css">
    <script src="../static/js/jquery-1.7.2.js"></script>
    {% block head %}
        <script type="text/javascript">
            function all_goods_in_one_goods_sub_type_name(goods_sub_type_name) {
                $.ajax({
                    type: "get",
                    url: "/all_goods_in_one_goods_sub_type_name/" + goods_sub_type_name,
                    async: false,
                    dataType: "json", {#切记，不能用text，一定要用json#}
                    success: function (data) {
                        if (data['code'] === 400) {
                            alert("没有这个子类！")
                        } else {
                            var str = '';
                            //先将元素对应清空
                            $('#product_items').empty();
                            str += '<div class="product_items_cond"> 分类 - ' + data['data']['GoodsSubType'] + '</div>';
                            for (var index in data['data']['Goods']) {
                                str +=
                                    '<div class="product_item_div">' +
                                    '<div class="product_item_img_div">' +
                                    '<img class="product_item_img" alt="" src="../static/img/used_for_test_images/background.jpg"/>' +
                                    '</div>' +
                                    '<div class="product_item_info">' +
                                    '<div class="product_item">' +
                                    '<span class="name_text">商品名:</span>' +
                                    '<span class="product_item_name_text">' + data['data']['Goods'][index]["GoodsName"] + '</span>' +
                                    '</div>' +
                                    '<div class="product_item">' +
                                    '<span class="price_text">价格:</span>' +
                                    '<span id="price" class="sp2">' + data['data']['Goods'][index]["GoodsPrice"] + '</span>' +
                                    '</div>' +
                                    '<div class="product_item">' +
                                    '<span class="price_text">商品库存:</span>' +
                                    '<span id="price" class="sp2">' + data['data']['Goods'][index]["GoodsCount"] + '</span>' +
                                    '</div>' +
                                    '<div class="product_item">' +
                                    '<span class="price_text">商品销量:</span>' +
                                    '<span id="price" class="sp2">' + data['data']['Goods'][index]["GoodsSell"] + '</span>' +
                                    '</div>' +
                                    '<div class="product_item_button">' +
                                    '<button onclick="add_shopping_car(' + data['data']['Goods'][index]["GoodsID"] + ')">加入购物车</button>' +
                                    '<input oninput="value=value.replace(/[^\\d]/g,\'\')" class="input_add_buycar_count" id = "' + data['data']['Goods'][index]["GoodsID"] + '" type="text">份' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>';
                            }
                            //将html动态拼接到对应的div上面
                            $('#product_items').html(str);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("请求失败！" + XMLHttpRequest + "===" + textStatus + "===" + errorThrown);
                    }
                });
            }

            function add_shopping_car(GoodsID) {
                var BuyCarNumber = document.getElementById(GoodsID).value;
                if (BuyCarNumber === "") {
                    alert("购买数量未填写")
                }
                else if(BuyCarNumber*1 === 0){
                    alert("购买数量不能为0！")
                }
                else if (BuyCarNumber.length > 6) {
                    alert("购物车一次只能最多添加6位数")
                }
                else {
                    var data = {
                        data: JSON.stringify({
                            "GoodsID": GoodsID,
                            "BuyCarNumber": BuyCarNumber,
                        }),
                    }
                    $.ajax({
                        url: "/add_shopping_car/",
                        type: "post",
                        data: data,
                        datatype: "json",
                        success: function (data) {
                            if (data['code'] === 200) {
                                alert("购物车添加成功！")
                            }
                            else if(data['code'] === 201){
                                alert("该商品已添加到购物车上，已经为您增加购物车上该商品的数量")
                            }
                            else if(data['code'] === 405){
                                alert("您尚未登录！请登录后再购买！")
                            }else if(data['code'] === 406){
                                alert("找不到此商品号！")
                            }
                            else if(data['code'] === 409){
                                alert("商品库存量不足！")
                            }
                        },
                        error: function (error) {
                            console.log(error)
                            alert("未知错误")
                        }
                    })
                }
            }
        </script>
    {% endblock %}
</head>
<body>
<div id="header">
    <span class="wel_word">农产品订购</span>
    <div>
        <a href="{{ url_for('main.index') }}">首页</a>
        {% if current_user.is_authenticated %}
            <a href="#">你好,{{ current_user.UserName }}</a>
            {#            <a><img src="{{ avatars.robohash(current_user.UserName,size='s') }}" alt="用户头像"></a>#}
            <a href="{{ url_for('main.logout') }}">注销</a>
            <a href="{{ url_for('main.shopping_car') }}">购物车</a>
            <a href="{{ url_for('main.order') }}">订单管理</a>
            <a href="{{ url_for('main.personals') }}">个人中心</a>
        {% else %}
            {#            <a><img src="{{ avatars.default(size='s') }}" alt="默认头像"></a>#}
            <a href="{{ url_for('main.register') }}">注册</a>
            <a href="{{ url_for('main.login') }}">登录</a>
        {% endif %}
    </div>
</div>
{% block content %}
    <div>
        <div class="div_goods_types_list">
            <ul>
                <br>
                {% for one_goods_type_data in type_list %}
                    <li class="sub-row">
                        <span class="goods_type">{{ one_goods_type_data['GoodsType'] }}</span>
                        {% for one_goods_sub_type_data in one_goods_type_data['GoodsSubType'] %}
                            <a class="goods_sub_type"
                               onclick="all_goods_in_one_goods_sub_type_name({{ "\""+one_goods_sub_type_data['GoodsSubTypeName']+"\"" }})">{{ one_goods_sub_type_data['GoodsSubTypeName'] }}</a>
                        {% endfor %}
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div>
        <div id="product_items">
            <div class="product_items_cond">
                <br>
            </div>
        </div>
    </div>
{% endblock %}
</body>
</html>